<template>
    <div id="app">
        <van-sticky>
        <div class='app_content'>
            <van-nav-bar title="商家汇总" left-text="返回" left-arrow @click-left="onClickLeft"/>
            <van-grid :clickable="true" :gutter="5" class="grad_item" :column-num="2">
                <van-grid-item icon="photo-o" text="暂无信息">
                    <div class="earnings">昨日收益</div>
                    <div class="meony">{{yesterday.money}}<span style="color: red">￥</span></div>
                    <div class="meony">{{yesterday.count}}<span style="color: red; font-size: 15px; position: relative;left: -0.2rem">&nbsp;笔</span></div>
                </van-grid-item>
                <van-grid-item icon="photo-o" text="暂无信息" >
                    <div class="earnings">今日收益</div>
                    <div class="meony">{{today.money}}<span style="color: red">￥</span></div>
                    <div class="meony">{{today.count}}<span style="color: red; font-size: 15px;position: relative;left: -0.2rem">&nbsp;笔</span></div>
                </van-grid-item>
            </van-grid>

            <van-grid  :column-num="3" :clickable="true" class="statistics">
                <van-grid-item @click="merchants_list" icon="photo-o" text="文字" >
                    <van-image style="width: 3rem;margin-bottom: 0.3rem" :src="img+'static/images/a.png'" />
                   <div>订单列表</div>
                </van-grid-item>
                <van-grid-item class="kexiao" icon="photo-o" text="文字" @click="kexiao" >订单核销</van-grid-item>
                <van-grid-item @click="trading" icon="photo-o" text="文字" >
                    <van-image style="width: 3rem;margin-bottom: 0.3rem" :src="img+'static/images/b.png'" />
                    <div>流水查询</div>
                </van-grid-item>
            </van-grid>

        </div>
        </van-sticky>
       
        <div :style="{height: contentHeight}" class="list">
            <van-list  v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                 <div  v-for="(item,i) in list"  :key="i">
                    <van-card
                            @click="viewOrder(item.order_id)"
                            id="van_card"
                            :num="item.product[0].count"
                            :price="item.product[0].product_price"
                            :title="item.product[0].product_title"
                            :thumb="item.product[0].product_image"
                    >
<!--                                            <template #tags>-->
<!--                                                <van-tag plain >标签</van-tag>-->
<!--                                                <van-tag plain type="danger">标签</van-tag>-->
<!--                                            </template>-->
<!--                        <template #footer>-->
<!--&lt;!&ndash;                            <img :src="item.prduct[0].product_image" alt="">&ndash;&gt;-->

<!--                        </template>-->
                    </van-card>
                  <div style=" background-color: white;text-align: right;margin: 0">
                      <span style="margin-right: 1.5rem">{{item.order_no}}</span>
<!--                      <van-button size="mini">确认</van-button>-->
                  </div>
                </div>

            </van-list>
        </div>
<!--        弹出的内容-->
        <van-popup v-model="showkexiao"  class="password2">
            <div style="font-size: 17px;font-weight: bold; padding:0.5rem 0rem 0.2rem 1rem;">请输入核销码</div>
            <van-password-input
                    :mask="false"
                    :value="value"
                    :length="8"
                    :maxlength="8"
                    :focused="showKeyboard"
                    @focus="showKeyboard = true"
            />
            <!-- 数字键盘 -->
            <van-number-keyboard
                    v-model="value"
                    :show="showKeyboard"
                    @blur="blur"
            />
        </van-popup>

        <!--     弹出订单信息-->
        <van-popup v-model="dingdan" class="dingdan" :style="{height:Height}" >
            <div v-for="(list,i) in orderlist" :key="i">
                <van-card
                        id="van_card"
                        :num="list.count"
                        :price="list.product_price"
                        :title="list.product_title"
                        :thumb="list.product_image"
                >
                </van-card>
            </div>
            <div style="margin: 0.5rem auto;text-align: right">
                <span style="padding-right: 1rem;">{{tt.order_no}}</span>
                <van-button style="margin-right: 0.5rem;" type="primary" @click="queren" size="mini">确认</van-button>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import config from "../../config";
    export default {

        name: "BusinessDetails",
        data(){
            return{
                list: [],
                loading: false,
                finished: false,
                today:{},
                yesterday:{},
                contentHeight:0,
                page:0,
                showkexiao:false,
                value: '',
                showKeyboard: true,
                // password:0,
                dingdan:false,
                orderlist:[],
                tt:[],
                Height:undefined,
                img:config.imgServer
            }
        },
        mounted() {
            this.contentHeight = document.documentElement.clientHeight - 150 - 150 + "px";
        this.gethome()

        },
        watch:{
          value:function (val) {
              var that=this;
              setTimeout(function () {
                  if (val.length>=8){
                      that.$toast.loading({
                          message: '加载中...',
                          forbidClick: true,
                      });
                      that.inquire()
                  }
              },300)
          }
        },

        methods:{
            viewOrder(order_id){
                this.$router.push("/member/order/detailtwo?id=" + order_id);
            },
            queren(){
                var that=this;
                that.$api
                    .get('manager.order/verification?order_id='+that.tt.order_id)
                    .then(json => {
                        console.log(json)
                        that.dingdan=false;
                        that.$toast.success("核销成功");
                    }).catch(err=>{
                       console.log(err)
                    that.$toast.fail(err.msg);

                })
            },
            inquire(){
                this.$api
                    .get('manager.order/detail?take_num='+this.value)
                    .then(json => {
                        this.tt=json.data
                        this.orderlist=json.data.product;
                        this.showkexiao=false;
                        this.value='';
                        this.dingdan=true;
                        if (this.orderlist.length>1){
                            this.Height=25+'rem';
                        }else{
                            this.Height=9+'rem';
                        }
                    }).catch(err=>{
                    console.log(err)
                        this.$toast.fail(err.msg);
                        this.value='';
                })
            },
            // focus(){
            //     this.showKeyboard=true;
            //     // this.password=1;
            // },
            blur(){
                this.showKeyboard=true;
                // this.value='';
                // this.password=0;
            },
            kexiao(){
                this.showkexiao=true;
            },
            //首页数据
            gethome(){
                this.$api
                    .get("manager.order/collect")
                    .then(json => {
                        console.log(json.data)
                        this.today=json.data.today;
                        this.yesterday=json.data.yesterday
                    })
            },
            //点击订单列表
            merchants_list(){
              this.$router.push("/member/order/merchants");
            },
            trading(){
                this.$router.push("/member/order/tradinginquiry");
            },
            onLoad() {
                this.page+=1
                this.orpect()
            },
            orpect(){
                this.$api.get('manager.order/pending?page='+this.page).then(json=>{
                    this.loading=false;
                    if (json.data.length) {
                        this.list.push(...json.data);
                        this.finished = false;
                    } else{
                        this.finished = true;
                    }
                })
            },
            onClickLeft() {
                this.$router.back();
            },
        }
    }
</script>

<style scoped>
    #app{
        /*border: solid 1px blue;*/
        width: 99%;
    }
    .app_content{
        /*border: solid 1px #ff0000;*/
    }
    .grad_item{
        margin-top: 1rem;
    }
    .kexiao{
        /*border: solid 1px red;*/
        font-size: 17px;
        font-weight: bold;
        font-family: Arial, Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, sans-serif;
    }
    .earnings{
        font-weight: bold;
        font-size: 20px;
        font-family: "Arial Black";
        margin: 0.5rem auto;

    }
    .meony{
        margin: 0.2rem auto;
        font-size:18px;
        font-weight: bold;

    }
    .statistics{
        margin-top: 1rem;
    }
    .list{
        margin-top: 0.3rem;
        /*border: solid 1px red;*/
        /*height:37rem;*/
        /*border: solid 1px red;*/
        overflow: scroll;
    }
    #van_card{
        margin-top: 0.2rem;
        background-color: white;

    }
    .password1{
        width: 70%;
        height: 20%;
    }
    .password2{
        width: 70%;
        height: 19rem;
    }
    .dingdan{
        width: 85%;
    }
</style>